<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wai {
           font-size: 40px;       
            margin: 0 auto;
            width: 300px;
            height: 500px;
           text-align: center;
            border: 1px solid #ba5f2e;
        }

       .wai>div{
        height: 100px;
        line-height: 100px;
       } 

     
        
       .wai>.date{ 
        line-height: 200px;
        height: 200px;
        background-color: darkorange;
       }
      
    </style>
</head>

<body>
    <div class="wai">
        <div class="year">
          
        </div>
        <div class="date">
           
        </div>
        <div class="day">
            
          
        </div>
        <div class="time">
            
        </div>
    </div>
    <script>
        function Now() {
          let now = new Date();
          // 创建一个时间对象
          let year = now.getFullYear();
          // 根据时间对象 获取的年份
          let month = now.getMonth()+1;
          // 根据时间对象 获取的月份
          // 传递多个数字，所以月份要加1
          let date = now.getDate();
          // 根据时间对象 获取的哪一天
          let hours = now.getHours();
          // 根据时间对象 获取时
          let minutes = now.getMinutes();
          // 根据时间对象 获取分
          let seconds = now.getSeconds();
          // 根据时间对象 获取秒
          let day = now.getDay(); 
          //// 根据时间对象 获取星期
          if (hours < 10) {
            hours = '0'+hours;
          }
          if (minutes<10) {
            minutes = '0'+minutes;
          }
          if (seconds<10) {
            seconds = '0'+seconds;
          }
        document.querySelector('.year').innerHTML = `${year}-${month}` ;
        document.querySelector('.date').innerHTML = `${date}`;
        document.querySelector('.day').innerHTML = '星期'+'日一二三四五六'[day];
        document.querySelector('.time').innerHTML =`${hours}时${minutes}分${seconds}秒`;

        }
        Now();
        setInterval(Now,1000);
        // 每隔1秒执行一次
    </script>
</body>

</html>